import {useEffect, useState, type FC } from 'react';
import { SnippetsOutlined ,SettingOutlined} from '@ant-design/icons';
import { Tabs } from 'antd';
import ComponentAttribute from './componentAttribute';
import  { useStore } from '@/store';
import { RIGHT_TAB_KEYS } from '@/constant';
import PageSetting from './pageSetting';





const RightPanel:FC = ()=>{
  const {selectedId}  = useStore()
  const [activeKey, setActiveKey] = useState<string>(RIGHT_TAB_KEYS.PROP_KEY);

  useEffect(()=>{
    if(!selectedId) setActiveKey(RIGHT_TAB_KEYS.PAGE_SETTING_KEY)
    else setActiveKey(RIGHT_TAB_KEYS.PROP_KEY)
  },[selectedId])
 
    const tabsItems = [
    {
      key:RIGHT_TAB_KEYS.PROP_KEY,
      label: (
        <span >
         <SnippetsOutlined  style={{marginLeft: 5, marginRight: 8}}/>
          属性
        </span>
      ),
      children: <ComponentAttribute></ComponentAttribute>
    },
    {
      key:RIGHT_TAB_KEYS.PAGE_SETTING_KEY,
      label: (
        <span>
         <SettingOutlined style={{marginRight:8}}/>
          页面设置
        </span>
      ),
      children: <PageSetting></PageSetting>
    }
  ]

  return <Tabs onChange={(key)=>setActiveKey(key)} style={{padding:'10px',marginTop:'-5px'}}  activeKey={activeKey} items={tabsItems}></Tabs>
}



export default RightPanel; 